<template>
  <view>
    <u-navbar title="绑定手机" auto-back fixed placeholder></u-navbar>
    <view class="content">
      <u-notice-bar :text="['根据相关政策要求，需完成手机号码绑定才能使用']" color="#00a679" bg-color="#00a6794d" 
      direction="column"></u-notice-bar>
      <u-form class="form" :model="form" :rules="rules" ref="form">
        <u-form-item prop="phone">
          <u-input v-model="form.phone" type="number" placeholder="手机号码" maxlength="11" clearable shape="circle"></u-input>
        </u-form-item>
        <u-form-item>
          <u-input v-model="form.code" type="number" placeholder="验证码" clearable shape="circle">
            <template slot="suffix">
              <u-code uniqueKey="bandPhone" @change="codeChange" @end="end"
              :seconds="120" ref="code" keepRunning changeText="X秒后重新获取"></u-code>
              <u-button @click="getCode" shape="circle" size="small"
              :color="hasSend ? '#d7dde8' : '#00a679'" >{{ tips }}</u-button>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item>
          <view class="btn" @click="handleSubmit">绑定手机</view>
        </u-form-item>
      </u-form>
    </view>

    <c-loading></c-loading>
  </view>
</template>

<script>
import {
  sendPhoneCode
} from '@/api'
import {
  updatePhone
} from '@/api/user'
export default {
  data() {
    return {
      form: {
        phone: '',
        code: '',
      },
      tips: '获取验证码',
      hasSend: false,
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: ['blur', 'change'] },
          { validator: (rule, val, callback) => {
              return /^1[3456789]\d{9}$/.test(val)
            },
            message: '手机号码格式错误',
            trigger: ['blur', 'change']
          }
        ],
        code: [
          { type: 'number' }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    getCode() {
      this.$refs.form.validateField('phone', valid => {
        if(valid.length > 0) {
          return
        }
      })
      sendPhoneCode(this.form.phone).then(res => {
        if(res.code === 200) {
          this.$refs.code.start()
          this.hasSend = true
        }
        this.$toast.show({
          msg: res.msg
        })
      })
    },
    codeChange(text) {
      this.tips = text
    },
    end() {
      this.hasSend = false
    },
    handleSubmit() {
      const params = {}
      params.id = this.$store.getters.id
      params.phone = this.form.phone
      params.code = this.form.code
      params.roleId = this.$store.getters.roleId
      this.$refs.form.validate().then(res => {
        if((this.form.code ?? '') == '') {
          this.$toast.show({
            msg: '请输入验证码'
          })
          return
        }
        updatePhone(params).then(res => {
          this.$toast.show({
            msg: res.msg
          })
          if(res.code === 200) {
            this.$store.commit('SET_PHONE', this.form.phone)
            this.timer = setTimeout(() => {
              uni.navigateBack()
            }, 300)
          }
        })
      })
      
    }
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #ffffff;

  .form {
    position: absolute;
    top: 15%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    & > view {
      margin: 10px 0;
    }

    .u-input {
      background-color: #f5f5f5;
    }

    &::v-deep .u-input__content__field-wrapper {
      padding: 0 5px;
    }
  }

  .btn {
    width: 100%;
    padding: 8px 0;
    margin-top: 20px;
    background-color: rgba($color: $primary-theme-color, $alpha: .2);
    border-radius: 25px;
    color: $primary-theme-color;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
  }
}
</style>